<template>
    <div class="form-content">
        
        <el-form ref="form" :model="form" :rules="rules" label-width="100px" :disabled="type == 'detail' ? true : false">
            <el-row :gutter="20">
                
                <el-col :span="24">
                    <el-form-item  label="作者名称" prop="authorInput">
                        <el-input  v-model="form.authorInput" placeholder="请输入作者名称"  />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item  label="作者头像" prop="avatarInput">
                        
                        <imageUpload v-model="form.avatarInput" size="mini" :isJson="false" :limit="1"/>
                        <el-button type="primary" @click="onHandleSelect" size="mini">选择头像</el-button>

                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item  label="素材类型" prop="materiaSecondType">
                        <el-radio-group v-model="form.materiaSecondType">
                            <el-radio :label="1" :value="1">视频</el-radio>
                            <el-radio :label="2" :value="2">图片</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                
                <el-col :span="24">
                    <el-form-item label="标签" prop="tags">
                        <el-select
                            v-model="form.tags"
                            placeholder="请选择标签"
                            clearable
                        >
                            <el-option 
                                v-for="dict in dict.type.material_center_type" 
                                :label="dict.label" 
                                :key="dict.value" 
                                :value="dict.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="form.materiaSecondType == 2">
                    <el-form-item  label="素材文件" prop="materiaJson">
                        <imageUpload v-model="form.materiaJson" size="mini" :isJson="false"/>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="form.materiaSecondType == 1">
                    <el-form-item  label="视频文件" prop="materiaJson">
                        <fileUpload v-model="form.materiaJson" :limit="1" :isJson="false" accept=".mp4,.avi,.mkv,.mov,.wmv,.flv,.webm,.mpeg" :fileSize="15"/>
                    </el-form-item>
                </el-col>
                <el-col :span="24" >
                    <el-form-item  label="文本内容" prop="textContent">
                        <el-input  v-model="form.textContent" type="textarea" placeholder="请输入文本内容"  />

                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" v-if="type != 'detail'" >
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
        <el-dialog title="选择头像" :visible.sync="isShowSelect" width="780px" append-to-body>
            <el-image v-for="(item,index) in dict.type.author_picture" :src="item.value"  class="select-img" @click="selectImg(item)">
            </el-image>
            
        </el-dialog>
    </div>
</template>
<script>
import {addMaterial,detailMaterial,editMaterial} from '@/api/materialManage/index.js'
export default{
    dicts: ['material_center_type','author_picture'],
    props: {
        id: {
            type:[Number,String],
            default: ''
        },
        type: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            
            form: {
                materiaSecondType: 1,
                materiaType: 4
            },
            rules: {
                authorInput: [
                    { required: true, message: "作者名称不能为空", trigger: "blur" }
                ],
                avatarInput: [
                    { required: true, message: "作者头像不能为空", trigger: "blur" }
                ],
                tags: [
                    { required: true, message: "标签不能为空", trigger: "blur" }
                ],
                materiaJson: [
                    { required: true, message: "素材文件不能为空", trigger: "blur" }
                ],
                textContent: [
                    { required: true, message: "文本内容不能为空", trigger: "blur" }
                ],
               
            },
            isShowSelect: false
        }
    },
    created() {
        if(this.id) {
            this.getDetail()
        }
    },
    methods: {
        selectImg(item) {
            this.form.avatarInput = item.value
            this.isShowSelect = false
        },
        onHandleSelect() {
            this.isShowSelect = true
        },
        getDetail() {
            detailMaterial({materialId: this.id}).then(res => {
                this.form = res.data
                this.form.tags = Number(this.form.tags)
            })
        },
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if(this.id) {
                        editMaterial(this.form).then(res => {
                            this.$modal.msgSuccess(res.msg)
                            this.$emit('success','')
                        })
                    }else{
                        addMaterial(this.form).then(res => {
                            this.$modal.msgSuccess(res.msg)
                            this.$emit('success','')
                        })
                    }
                    
                }
            })
        },
        cancel() {
            this.$emit('close','')
        }
    }
}
</script>
<style lang="scss" scoped>
.select-img{
    width: 80px;
    height: 80px;
    border: 1px dashed #ebeef5;
    margin-right: 10px;
    margin-bottom: 10px;
}
</style>
